<template>
  <div class="user-center-container">
    <!-- 用户信息卡片 -->
    <div class="user-card card">
      <div class="user-avatar-section">
        <div class="avatar-wrapper">
          <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" alt="User Avatar">
          <img v-else src="@/assets/images/home/top_nav_user.svg" class="avatar" alt="Default Avatar">
        </div>
        <div class="user-meta">
          <h2 class="username">
            {{ userInfo.nikeName || userInfo.id }}
            <button class="edit-btn" @click="editMet">
              <Icon type="ios-create-outline" />
            </button>
          </h2>
          <p class="user-id">ID: {{ userInfo.id }}</p>
        </div>
      </div>

      <!-- 资产概览 -->
      <div class="assets-overview">

        <div class="asset-item">
          <span class="asset-icon">
            <img src="@/assets/images/icons/icon_balance.png" alt="">
          </span>
          <div class="asset-info">
            <div class="asset-label">{{ $t('user.balance') }}</div>
            <div class="asset-value">
              {{ userInfo.currency }} {{ userInfo.amount || 0 }}
            </div>
          </div>
          <span class="arrow">
            <img src="@/assets/images/icons/icon_arrow_right3.png" alt="">
          </span>
        </div>

        <div class="asset-item" @click="jumpCouponMet">
          <span class="asset-icon">
            <img src="@/assets/images/icons/icon_copton.png" alt="">
          </span>
          <div class="asset-info">
            <div class="asset-label">
              {{ $t('assistant.coupon_length') }}
            </div>
            <div class="asset-value">
              <span style="font-size: 12px;">X</span>{{ couponCount }}
            </div>
          </div>
          <span class="arrow">
            <img src="@/assets/images/icons/icon_arrow_right3.png" alt="">
          </span>
        </div>



        <!-- 金币 -->
        <!-- <div class="asset-item">
          <div class="asset-label">
            <span>{{ $t('combination.gold_coin') }}</span>
            <i class="icon-info" v-tooltip="$t('combination.coin_tip')"></i>
          </div>
          <div class="asset-value">
            <span class="currency">{{ userCurrency }}</span>
            <count-to :startVal="0" :endVal="userInfo.goldCoin" :separator=separator :duration="1000"
              :autoplay="true"></count-to>
          </div>
        </div> -->

        <!-- 积分 -->
        <!-- <div class="asset-item">
          <div class="asset-label">
            <span>{{ $t('personal.Credit') }}</span>
          </div>
          <div class="asset-value">
            {{ points || 0 }}
          </div>
        </div> -->

        <!-- <div class="asset-item balance-item">
          <div class="asset-label">{{ $t('user.balance') }}</div>
          <div class="asset-value">
            {{ userInfo.currency }} {{ userInfo.amount || 0 }}
          </div>
          <div class="asset-actions">
            <button class="action-btn deposit" @click="topUpMet">
              {{ $t('user.recharge') }}
            </button>
            <button class="action-btn withdraw" @click="withDrawalMet">
              {{ $t('user.withdraw') }}
            </button>
          </div>
        </div> -->
      </div>
    </div>

    <!-- 账号认证部分 -->
    <!-- <div class="auth-section card">
      <div class="section-header">
        <h3>{{ $t('home.account_validation') }}</h3>
      </div>

      <div class="auth-item">
        <div class="auth-icon discord-icon">
          <img src="@/assets/images/user/task_img5.png" class="img-icon" alt="">
        </div>
        <div class="auth-info">
          <h4>{{ $t('home.bind_label_discord') }}</h4>
          <p>{{ $t('home.discord_bind_description') }}</p>
        </div>
        <div class="auth-action">
          <button v-if="userInfo.bindThird && userInfo.bindThird.includes('discord')" class="status-btn bound" disabled>
            {{ $t('home.is_bind_status') }}
          </button>
          <button v-else class="status-btn bind" @click="bindDiscordMet">
            {{ $t('home.to_bind_text') }}
          </button>
        </div>
      </div>
    </div> -->

    <div class="user-order card">
      <div class="card-title">Unpaid</div>

      <div class="cart-table-header">
        <div class="item" style="flex:1;">
          Product Details
        </div>
        <div class="item text-center" style="width:120px;">
          Unit Price
        </div>
        <div class="item text-center" style="width:120px;">
          Quantity
        </div>
        <div class="item text-center" style="width:120px;">
          Added Services
        </div>
        <div class="item text-center" style="width:120px;">
          Product Amount
        </div>
        <div class="item text-center" style="width:120px;">
          Remark
        </div>
        <div class="item text-center" style="width:120px;">
          Order Status
        </div>
      </div>

      <div class="cart-empty" v-if="!loading && dataList.length == 0">
        <t-no-data type="cart"></t-no-data>
      </div>

      <div class="cart-table-body" v-if="dataList.length > 0">
        <div class="shop-card" v-for="order in dataList" :key="order.subOrder ? order.subOrder : order.orderNo">
          <div class="shop-header">
            <t-platform class="platform-tag" :type="order.itemList[0].channel"></t-platform>
            <div class="item">
              <span>{{ $t("user.orderNumber") }}: {{ order.subOrder ? order.subOrder : order.orderNo }}</span>
            </div>
            <div class="item">
              <span>{{ $t("user.creationTime") }}: {{ order.orderTime }}</span>
            </div>
            <div class="item">
              <span>{{ appName }} {{ $t("user.stash") }}</span>
            </div>
            <div class="item"
              v-if="order.itemList[0].replenishmentTime && order.itemList[0].outOfStockStatus == '4' && order.itemList[0].orderStatus == 'WAIT_PROCESS'">
              <span>{{ $t('order.arrivalWait') }}：{{ order.itemList[0].replenishmentTime }}</span>
            </div>
          </div>

          <template v-for="(item, index) in order.itemList">
            <div class="shop-product-list" :key="item.id">
              <div class="item" style="flex:1;">
                <div class="product-info">
                  <div class="product-image">
                    <product-picture v-if="item.mainImg" :image-list="[item.mainImg]"></product-picture>
                    <img v-else class="default-image" src="@/assets/images/public/default-image.png" alt="">

                    <!-- 拼团标签 -->
                    <div class="group-tag" v-if="item.orderGroupVo">
                      <div class="discount-tag">
                        <div>{{ bigTimes(item.orderGroupVo.discount, 100) }}%</div>
                        <div>OFF</div>
                      </div>
                      <div class="status-tag">
                        <img src="@/assets/images/public/dian.png" alt="">
                        <span>{{ groupStatus(item.orderGroupVo.groupStatus) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="product-details">
                    <!-- 商品标题 -->
                    <router-link v-if="item.channel"
                      :to="`/goods/details?id=${item.spuNo}&channel=${item.channel}` + (userInfo.inviteCode ? `&inviteCode=${userInfo.inviteCode}` : '')"
                      class="product-title">
                      {{ item.subject }}
                    </router-link>
                    <div v-else @click="jumpBtn(item.detailUrl)" class="product-title">
                      {{ item.subject }}
                    </div>

                    <!-- 商品属性 -->
                    <div class="product-attributes">
                      <div class="attribute-item" v-for="attributeItem in item.skuAttrEnumFormatList"
                        :key="attributeItem.id">
                        {{ attributeItem.name }}：{{ attributeItem.value }}
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <div class="item text-center" style="width:120px;">
                <!-- 商品价格 -->
                <div class="product-price">
                  {{ userInfo.currencySymbol }} {{ item.price }}
                </div>
              </div>

              <div class="item text-center" style="width:120px;">
                <!-- 商品数量 -->
                <div class="product-quantity">
                  x {{ item.quantity }}
                </div>
              </div>

              <div class="item text-center" style="width:120px;">
                <!-- 增值服务 -->
                <div class="value-services">
                  <div class="service-item">
                    <span class="service-btn" @click="cusMet(item)" :class="{ disabled: compStatus(item) }">
                      {{ $t("custom.cus_name_pic") }}
                    </span>
                    <Tooltip max-width="200" :content="$t('custom.name_pic_tip')">
                      <div class="tooltip">
                        <i class="help-icon"></i>
                      </div>
                    </Tooltip>
                  </div>
                  <div class="service-item">
                    <span class="service-btn" @click="cusMet(item)" :class="{ disabled: compStatus(item) }">
                      {{ $t("custom.cus_name_vid") }}
                    </span>
                    <Tooltip max-width="200" :content="$t('custom.name_vid_tip')">
                      <div class="tooltip">
                        <i class="help-icon"></i>
                      </div>
                    </Tooltip>
                  </div>
                </div>
              </div>

              <div class="item text-center" style="width:120px;">

                <!-- 商品总价 -->
                <div class="product-total">
                  <div class="total-price">
                    <span>{{ userInfo.currencySymbol }} {{ goodsPrice(item.price, item.quantity, item.expressFee)
                    }}</span>
                    <div class="price-tooltip">
                      <i class="help-icon"></i>
                      <div class="tooltip-content">
                        <div>{{ $t("user.commodityAmount") }} {{ userInfo.currencySymbol }} {{ compAmount(item.price,
                          item.quantity, item.couponDiscountAmount) }}</div>
                        <div>{{ $t("user.freightWarehouse") }} {{ userInfo.currencySymbol }} {{ item.expressFee }}
                        </div>
                        <div>{{ $t("wayBill.coupon_fee") }} {{ userInfo.currencySymbol }} {{ item.couponDiscountAmount
                        }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="coupon-discount" v-if="item.couponDiscountAmount && item.couponDiscountAmount > 0">
                    - {{ userCurrency.code }} {{ item.couponDiscountAmount }}
                  </div>
                </div>
              </div>
              <div class="item text-center" style="width:120px;">
                <!-- 备注 -->
                <div class="product-remark">
                  <div class="remark-text">{{ item.remarks }}</div>
                  <img v-if="item.orderStatus == 'INIT' || item.orderStatus == 'WAIT_PAYMENT'"
                    src="@/assets/images/parcel/edit-aeb.png" class="edit-icon" @click="onRmk(item)">
                </div>
              </div>
              <div class="item text-center" style="width:120px;">
                <!-- 订单状态 -->
                <div class="order-status">
                  <order-status :status="item.orderStatus" :statusName="item.orderStatusName"
                    :subStatus="item.internalStatus" :orderNo="item.orderNo"></order-status>

                  <!-- 查看物流 -->
                  <div class="logistics-btn" v-if="item.expressNoList.length > 0 && item.orderStatus != 'RETURNED'"
                    @click="showParcelPop(item)">
                    {{ $t("user.viewLogistics") }}
                  </div>

                  <!-- 拼团邀请 -->
                  <div class="group-action"
                    v-if="item.orderGroupVo && (item.orderGroupVo.groupStatus == 'WAIT' || item.orderGroupVo.groupStatus == 'COMPLETE') && item.orderStatus != 'WAIT_PAYMENT'">
                    <button class="invite-btn" @click="inviteMet(item)">
                      <img src="@/assets/images/pay/flash.png" alt="">
                      <span>{{ btnText(item.orderGroupVo.groupStatus) }}</span>
                    </button>
                    <div class="invite-tip">{{ $t('goods.group_play_text40') }}</div>
                  </div>

                  <!-- 申请奖励 -->
                  <button class="reward-btn"
                    v-if="item.orderStatus == 'STORED' || (item.orderGroupVo && item.orderGroupVo.groupStatus == 'COMPLETE')"
                    @click="rewardBtn(item)">
                    <img src="@/assets/images/login/reward.png" alt="">
                    {{ $t('user.apply_award') }}
                  </button>
                </div>
              </div>

            </div>

            <div class="shop-footer" :key="index">
              <!-- 订单操作 -->
              <div class="product-actions">

                <!-- 待支付操作 -->
                <div class="payment-actions" v-if="order.status == 'WAIT_PAYMENT'">
                  <div class="payment-timer">
                    <span>
                      Remaining Payment Time:
                    </span>
                    <count-down :current-time="order.serverTime" :end-time="order.expiredTime"></count-down>
                  </div>
                  <Button type="primary" @click="onPay(order)">
                    {{ $t("user.pay_text") }}
                  </Button>
                </div>

                <!-- 申请退货 -->
                <div class="return-section"
                  v-if="item.returnable && item.returnOrderApplyTime && item.serverTime < item.returnOrderApplyTime">

                  <div class="return-timer" style="margin-right:16px;">
                    <span>
                      Remaining Return Time:
                    </span>
                    <count-down :current-time="item.serverTime" :end-time="item.returnOrderApplyTime"></count-down>
                    <Tooltip max-width="200" :content="$t('user.count_time_tips')">
                      <i class="help-icon"></i>
                    </Tooltip>
                  </div>
                  <Button type="primary" @click="applyBtn(item)">{{ $t('user.apply_text') }}</Button>
                </div>

                <!-- 取消退货 -->
                <Button type="primary" @click="cancelApply(item)"
                  v-if="item.orderStatus == 'RETURNING_GOODS' && item.returnOrder && (item.returnOrder.status == 'UNPAYMENT' || item.returnOrder.status == 'UNCONFIRM')">{{
                    $t('user.cancel_apply') }}</Button>

                <!-- 补款按钮 -->
                <div class="mend-btn"
                  v-if="order && order.status == 'STORED' && order.itemList && order.itemList.length && order.itemList[0].returnOrder && order.itemList[0].orderStatus == 'RETURNING_GOODS' && order.itemList[0].returnOrder && order.itemList[0].returnOrder.status == 'UNPAYMENT'">
                  <router-link :to="`/pay?id=${order.itemList[0].returnOrder.id}&markText=mend`">
                    <button class="mend-button">
                      {{ $t("user.mend_text") }}
                    </button>
                  </router-link>
                </div>

                <!-- 订单详情 -->
                <Button @click="detailMet(order, item)"
                  v-if="item.orderStatus !== 'INIT' && item.orderStatus !== 'WAIT_PAYMENT'">{{ $t('user.order_detail')
                  }}</Button>
              </div>
            </div>
          </template>

        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <Page :total="totalPage" show-sizer />
      </div>

      <t-loading class="loading-indicator" v-if="loading"></t-loading>

    </div>

    <!-- 模态框组件 -->
    <top-up-pop ref="topUpRef"></top-up-pop>
    <bind-discord-pop ref="discordRef"></bind-discord-pop>
    <bind-phone-number ref="bindPhoneRef"></bind-phone-number>
    <guide-assiatant :dataArr="guideArr" :titleData="titleName" ref="guideRef"></guide-assiatant>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { orderList, myCouponList } from "@/api/order";
import BindDiscordPop from './components/bind-discord-pop.vue';
import BindPhoneNumber from './components/bind-phone-number.vue';
import GuideAssiatant from './components/guide-assiatant.vue';
import TopUpPop from './components/top-up-pop.vue';
import countTo from 'vue-count-to';
import { getTaskList, getRoute, getBindDiscordUrl } from "@/api/user";
// import { getTaskNewList, getReceive } from "@/api/user";
// import { myCouponList } from "@/api/order";
import TLoading from "@/components/t-loading";
import TNoData from "@/components/t-no-data";
import { bigPlus, bigTimes, bigMinus } from "@/common/digital-computation";
import TPlatform from "@/components/t-platform";
import OrderStatus from "@/views/main/user/components/order-status";
import CountDown from "@/views/main/user/components/count-down";
import ProductPicture from "@/views/main/user/components/product-picture";

export default {
  components: {
    TopUpPop,
    BindPhoneNumber,
    BindDiscordPop,
    GuideAssiatant,
    countTo,
    TLoading,
    TNoData,
    TPlatform,
    OrderStatus,
    CountDown,
    ProductPicture
  },
  data() {
    return {
      guideArr: [
        { id: 1, title: '如何购买商品', img: 'https://libcdn1.hahbuy.com/guide/如何购买商品.gif' },
        { id: 2, title: '如何购买增值服务', img: 'https://libcdn1.hahbuy.com/guide/如何购买定制服务.gif' },
        { id: 3, title: '如何提交包裹', img: 'https://libcdn1.hahbuy.com/guide/提交包裹&重新提交包裹&支付预估运费.gif' },
        { id: 4, title: '支付国际运费', img: 'https://libcdn1.hahbuy.com/guide/如何支付国际运费&确认最终运费.gif' }
      ],
      titleName: '新人用户引导',
      couponList: [],
      separator: '',
      expiredArr: [],
      defaultForm: {
        countryCode: "US"
      },
      couponCount: 0,
      expiredCount: 0,
      goldCoin: 0,
      points: 0,
      loading: false,
      dataList: [],
      totalPage: 0,
      form: {
        orderNo: "", // 订单号
        pageNo: 1, // 页
        pageSize: 20, // 页数
        status: "WAIT_PAYMENT", // 运单状态
      },
      appName: process.env.VUE_APP_NAME,
    };
  },
  computed: {
    ...mapState({
      userCurrency: (state) => state.user.userCurrency.code,
      userLanguage: state => state.user.userLanguage,
      userInfo: state => state.user.userInfo
    })
  },
  watch: {
    userInfo: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal && window.location.search.length > 0) {
          this.eachMeth(window.location.search);
        }
      }
    }
  },
  created() {
    this.getMyCouponList();
    this.getExpiredList();
    // this.fetchUserAssets();

    this.getDataList();
  },
  methods: {
    compAmount(price, quantity, couponDiscountAmount) {
      let v = bigTimes(price, quantity);
      return bigMinus(v, couponDiscountAmount);
    },
    // 如果是待支付状态，定制照片和定制视频，颜色为灰色且鼠标移入不显示小手
    compStatus(item) {
      return item.orderStatus === "WAIT_PAYMENT";
    },
    goodsPrice(price, num, transportAmountCn) {
      let t = bigTimes(price, num);
      return bigPlus(t, transportAmountCn);
    },
    getDataList() {
      // 获取订单列表
      this.loading = true;
      let status = this.form.status;
      let obj = { ...this.form, ...{ status: status } };
      orderList(obj)
        .then((res) => {
          let data = res.result.records;
          for (let i = 0; i < data.length; i++) {
            data[i].active = false;
          }
          // 拆单
          const processedData = [];
          data.forEach(item => {
            item.subOrder = '';
            if (item.status !== 'INIT' && item.status !== 'WAIT_PAYMENT') {
              item.itemList.forEach(subItem => {
                item.subOrder = subItem.id;
                const newItem = {
                  ...item,
                  itemList: [subItem]
                };
                // 拆单后
                newItem.itemAmount = (subItem.price * subItem.quantity).toFixed(2);
                newItem.totalExpressFee = subItem.expressFee;
                // 重新计算订单总价
                const totalAmount = ((subItem.price * subItem.quantity) + (subItem.expressFee || 0)).toFixed(2);
                newItem.orderAmount = totalAmount;
                // newItem.itemAmount = totalAmount;

                processedData.push(newItem);
              });
            } else {
              processedData.push(item);
            }
          });

          this.dataList = processedData;
          this.timestamp = res.timestamp;
          this.totalPage = res.result.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    eachMeth(val) {
      if (this.userInfo.bindThird && this.userInfo.bindThird.includes('discord')) return;

      const urlParams = new URLSearchParams(val.split('?')[1]);
      const stateValue = urlParams.get('state');
      const codeValue = urlParams.get('code');
      const sourceValue = urlParams.get('source');

      if (sourceValue === 'discord') {
        this.discordCallBack(sourceValue, codeValue, stateValue);
      }
    },

    discordCallBack(sourceValue, codeValue, stateValue) {
      this.defaultForm = {
        ...this.defaultForm,
        source: sourceValue,
        currencyCode: this.userCurrency,
        lang: this.userLanguage.code,
        inviteCode: sessionStorage.getItem("INVITE_CODE") || '',
        code: codeValue,
        state: stateValue,
        callback: `https://100buy.com/user/center?source=discord`
      };

      getBindDiscordUrl(this.defaultForm).then((res) => {
        if (res.code == 200) {
          this.$message.success('Link successfully.');
          this.$store.dispatch("getUserInfo");
        } else {
          this.$message.error(res.message || 'Link failed');
        }
      });
    },

    getMyCouponList() {
      myCouponList().then(({ result }) => {
        this.couponCount = result?.length || 0;
      }).catch(err => {
        console.error('Failed to fetch coupons:', err);
      });
    },
    getExpiredList() {
      myCouponList({ expd: 3 }).then(({ result }) => {
        this.expiredCount = result?.length || 0;
      }).catch(err => {
        console.error('Failed to fetch expired coupons:', err);
      });
    },
    fetchUserAssets() {
      // 假设有一个API获取用户资产信息
      getUserAssets().then(res => {
        if (res.code === 200) {
          this.goldCoin = res.result.goldCoin || 0;
          this.points = res.result.points || 0;
        }
      });
    },

    editMet() {
      this.$router.push('/user/editProfile');
    },

    topUpMet() {
      this.$refs.topUpRef.open();
    },

    withDrawalMet() {
      this.$router.push('/user/withdraw');
    },

    bindDiscordMet() {
      this.defaultForm = {
        ...this.defaultForm,
        source: 'discord',
        currencyCode: this.userCurrency,
        lang: this.userLanguage.code,
        inviteCode: sessionStorage.getItem("INVITE_CODE"),
        activityCode: this.$route.query.activityCode,
        callback: `https://100buy.com/user/center?source=discord`
      };

      getRoute(this.defaultForm).then((res) => {
        if (res.code === 200) {
          const url = res.result.replace(
            /redirect_uri=[^&]*/,
            `redirect_uri=${'https://100buy.com/user/center?source=discord'}`
          );
          window.open(url, '_blank');
        }
      });
    },

    jumpCouponMet() {
      const tabValue = 'name2';
      this.$router.push(`/user/assets?from=${tabValue}`);
    }
  }
};
</script>

<style lang="less" scoped>
.user-center-container {
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  .card {
    border-radius: 20px;
    background: #FFF;
    padding: 20px;
  }

  .user-card {
    margin-bottom: 16px;

    .user-avatar-section {
      display: flex;
      align-items: center;
      margin-bottom: 32px;

      .avatar-wrapper {
        position: relative;

        .avatar {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          object-fit: cover;
          border: 3px solid rgba(255, 211, 51, 0.3);
        }
      }

      .user-meta {
        margin-left: 20px;

        .username {
          font-size: 24px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 0 0 10px 0;
          display: flex;
          align-items: center;

          .edit-btn {
            background: none;
            border: none;
            margin-left: 8px;
            cursor: pointer;

            .icon-edit {
              display: inline-block;
              width: 16px;
              height: 16px;
              background-color: #666;
              mask: url("@/assets/images/parcel/edit-aeb.png") no-repeat center;
              transition: all 0.2s;
            }

            &:hover .icon-edit {
              background-color: #333;
            }
          }
        }

        .user-id {
          font-size: 14px;
          color: #666;
          margin: 0;
        }
      }
    }

    .assets-overview {
      display: flex;
      gap: 12px;

      .asset-item {
        padding: 16px;
        border-radius: 12px;
        border: 1px solid #FFEDF3;
        background: linear-gradient(90deg, #FFF8FA 0%, #FFEDF3 100%);
        transition: all 0.3s ease;
        position: relative;
        width: 50%;

        display: flex;

        .asset-icon {
          display: block;
          width: 40px;
          height: 40px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .asset-info {
          flex: 1;
          height: 40px;
          margin-left: 10px;
          position: relative;

          .asset-label {
            color: #191919;
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 2px;
          }

          &:hover .asset-badge {
            display: block;
          }
        }

        .arrow {
          width: 24px;
          height: 40px;
          margin-left: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          img {
            width: 24px;
            height: 24px;
            object-fit: contain;
          }
        }


        .asset-value {
          color: #FF186B;
          font-family: Inter;
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }

        .asset-badge {
          position: absolute;
          top: -8px;
          right: -8px;
          background: #FF5C98;
          color: white;
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 10px;
        }
      }

      .balance-item {
        grid-column: span 2;
        display: flex;
        flex-direction: column;

        .asset-actions {
          display: flex;
          gap: 12px;
          margin-top: 16px;

          .action-btn {
            flex: 1;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.2s;

            &.deposit {
              background: linear-gradient(135deg, #FFD333, #FFA800);
              color: #452E00;

              &:hover {
                box-shadow: 0 4px 12px rgba(255, 168, 0, 0.2);
              }
            }

            &.withdraw {
              background: rgba(255, 255, 255, 0.8);
              border: 1px solid #E9EAF3;
              color: #1a1a1a;

              &:hover {
                background: rgba(255, 255, 255, 1);
                border-color: #d0d0d0;
              }
            }
          }
        }
      }
    }
  }

  .auth-section {
    padding: 24px;

    .section-header {
      margin-bottom: 24px;

      h3 {
        font-size: 20px;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0;
      }
    }

    .auth-item {
      display: flex;
      align-items: center;
      padding: 16px;
      background: rgba(245, 246, 250, 0.6);
      border-radius: 12px;

      .auth-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;

        .img-icon {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .auth-info {
        flex: 1;

        h4 {
          font-size: 16px;
          font-weight: 600;
          margin: 0 0 4px 0;
          color: #1a1a1a;
        }

        p {
          font-size: 14px;
          color: #666;
          margin: 0;
        }
      }

      .auth-action {
        .status-btn {
          min-width: 120px;
          padding: 10px 16px;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 500;
          border: none;
          cursor: pointer;
          transition: all 0.2s;

          &.bound {
            background: #E9EAF3;
            color: #999;
            cursor: not-allowed;
          }

          &.bind {
            background: linear-gradient(135deg, #5865F2, #404EED);
            color: white;

            &:hover {
              box-shadow: 0 4px 12px rgba(88, 101, 242, 0.2);
            }
          }
        }
      }
    }
  }

  .user-order {
    .card-title {
      font-size: 20px;
      font-weight: 600;
      color: #2F333A;
      margin-bottom: 20px;
    }
  }

  .cart-table-header {
    display: flex;
    height: 35px;
    border-radius: 8px;
    background: #F5F5F5;
    padding-left: 28px;
    margin-bottom: 20px;

    .item {
      display: flex;
      align-items: center;
    }

    .text-center {
      justify-content: center;
    }
  }
}

// 产品详情部分
.product-info {
  display: flex;
  gap: 15px;

  .product-image {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;

    .default-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #f5f5f5;
    }

    .group-tag {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;

      .discount-tag {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 42px;
        height: 42px;
        background: url('@/assets/images/pay/tag_rig.png') no-repeat center;
        background-size: contain;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: rotate(-35deg);
        font-weight: 800;
        font-size: 12px;
        color: #fff;
        line-height: 12px;
      }

      .status-tag {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 3px 5px;
        background: linear-gradient(299deg, #FF326C 0%, #FF3434 41%, #FF3810 100%);
        border-radius: 0 0 8px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-weight: 500;
        font-size: 13px;
        color: #fff;

        img {
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .product-details {
    flex: 1;
    min-width: 0;

    .product-title {
      font-weight: 500;
      font-size: 12px;
      color: #222;
      line-height: 1.4;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &:hover {
        color: #ff186b;
      }
    }

    .product-attributes {
      .attribute-item {
        font-size: 11px;
        color: #969696;
        line-height: 1.4;
        margin-bottom: 2px;
      }
    }
  }
}

// 价格、数量等单元格样式
.product-price,
.product-quantity {
  font-size: 14px;
  color: #333;
  text-align: center;
}

// 增值服务
.value-services {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .service-item {
    display: flex;
    align-items: center;
    gap: 5px;

    .service-btn {
      color: #ff186b;
      font-size: 12px;
      cursor: pointer;
      transition: color 0.3s;
      border-radius: 6px;
      border: 1px solid #F1F1F1;
      height: 20px;
      padding: 0px 6px;

      &.disabled {
        color: #ccc;
        cursor: default;
      }

      &:not(.disabled):hover {
        text-decoration: underline;
      }
    }

    .tooltip {
      position: relative;
      display: inline-block;

      .help-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url('@/assets/images/public/help-icon.png') no-repeat center;
        background-size: contain;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }
      }

      .tooltip-content {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 10;
        margin-bottom: 5px;
        max-width: 300px;
        white-space: pre;

        &:before {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border-width: 5px;
          border-style: solid;
          border-color: #333 transparent transparent transparent;
        }
      }

      &:hover .tooltip-content {
        display: block;
      }
    }
  }
}

// 备注区域
.product-remark {
  display: flex;
  align-items: center;
  gap: 8px;

  .remark-text {
    flex: 1;
    font-size: 14px;
    color: #666;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .edit-icon {
    width: 12px;
    height: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;

    &:hover {
      opacity: 1;
    }
  }
}

// 订单状态区域
.order-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  .logistics-btn {
    color: #ff186b;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      text-decoration: underline;
    }
  }

  .group-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    .invite-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background: linear-gradient(299deg, #FF326C 0%, #FF3434 41%, #FF3810 100%);
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;

      img {
        width: 16px;
        height: 16px;
      }
    }

    .invite-tip {
      font-size: 12px;
      color: #ff186b;
    }
  }

  .reward-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border: 1px solid #ff186b;
    border-radius: 4px;
    background: transparent;
    color: #ff186b;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;

    img {
      width: 16px;
      height: 16px;
    }

    &:hover {
      background: rgba(255, 24, 107, 0.1);
    }
  }
}

// 商品总价
.product-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  .total-price {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;

    .price-tooltip {
      position: relative;
      display: inline-block;

      .help-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url('@/assets/images/public/help-icon.png') no-repeat center;
        background-size: contain;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }
      }

      .tooltip-content {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 10;
        margin-bottom: 5px;
        text-align: left;

        &:before {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border-width: 5px;
          border-style: solid;
          border-color: #333 transparent transparent transparent;
        }
      }

      &:hover .tooltip-content {
        display: block;
      }
    }
  }

  .coupon-discount {
    font-size: 14px;
    color: #ff186b;
  }
}

// 订单操作区域
.product-actions {
  display: flex;
  align-items: center;
  gap: 8px;

  .payment-actions,
  .payment-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #969696;
  }

  .payment-timer {
    /deep/ .date {
      color: #ff186b;
    }
  }

  .detail-btn {
    color: #333;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #ff186b;
    }
  }

  .return-section {
    display: flex;
    align-items: center;
    gap: 4px;

    .return-btn {
      color: #ff186b;
      font-size: 15px;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        text-decoration: underline;
      }
    }

    .return-timer {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: #999;
      cursor: pointer;

      .help-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url('@/assets/images/public/help-icon.png') no-repeat center;
        background-size: contain;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }
      }

      /deep/ .date {
        color: #ff186b;
      }
    }
  }

  .cancel-return {
    color: #ff186b;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      text-decoration: underline;
    }
  }

  .mend-btn {
    .mend-button {
      padding: 6px 12px;
      background: #ff186b;
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s;
      min-width: 70px;

      &:hover {
        background: #e01660;
      }
    }
  }
}

// 商品照片区域
.product-photos,
.custom-photos,
.custom-videos {
  margin-top: 15px;
  padding: 15px;
  background: #f7f9fc;
  border-radius: 4px;

  .photo-section,
  .video-section {

    .photo-title,
    .video-title {
      font-size: 16px;
      color: #1e1714;
      margin-bottom: 10px;
    }

    .photo-list,
    .video-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
  }
}

// 拒绝补款弹窗剩余样式
.reject-modal {
  .reject-actions {
    .close-btn {
      padding: 8px 40px;
      background: #F21473;
      border-radius: 8px;
      border: none;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: #e01368;
      }
    }
  }
}

// 物流包裹选择弹窗
.parcel-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  overflow: hidden;

  .parcel-header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      font-size: 18px;
      font-weight: 500;
      margin: 0;
    }

    .close-icon {
      width: 20px;
      height: 20px;
      // background: url('@/assets/images/public/close-icon.png') no-repeat center;
      // background-size: contain;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.3s;

      &::before {
        content: "×";
        font-size: 20px;
        font-weight: bold;
      }

      &:hover {
        opacity: 1;
      }
    }
  }

  .parcel-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;

    .parcel-table {
      width: 100%;
      border-collapse: collapse;

      thead {
        tr {
          th {
            padding: 12px 15px;
            text-align: left;
            background: #f9f9f9;
            font-weight: 500;
            color: #666;
            border-bottom: 1px solid #eee;
          }
        }
      }

      tbody {
        tr {
          td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            vertical-align: middle;

            .view-btn {
              padding: 6px 12px;
              background: #ff186b;
              border: none;
              border-radius: 4px;
              color: #fff;
              font-size: 14px;
              cursor: pointer;
              transition: background 0.3s;

              &:hover {
                background: #e01660;
              }
            }
          }

          &:last-child {
            td {
              border-bottom: none;
            }
          }
        }
      }
    }
  }

  .parcel-footer {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 15px;

    .cancel-btn {
      padding: 8px 20px;
      background: #f5f5f5;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #eee;
      }
    }

    .confirm-btn {
      padding: 8px 20px;
      background: #ff186b;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: #e01660;
      }
    }
  }
}

// 收货地址弹窗
.address-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  overflow: hidden;

  .address-header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      font-size: 18px;
      font-weight: 500;
      margin: 0;
    }

    .close-icon {
      width: 20px;
      height: 20px;
      // background: url('@/assets/images/public/close-icon.png') no-repeat center;
      // background-size: contain;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.3s;

      &::before {
        content: "×";
        font-size: 20px;
        font-weight: bold;
      }

      &:hover {
        opacity: 1;
      }
    }
  }

  .address-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
  }
}

.cart-table-header {
  display: flex;
  height: 35px;
  border-radius: 8px;
  background: #F5F5F5;
  padding: 0 12px;
  margin-bottom: 32px;

  .item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #969696;
  }

  .text-center {
    justify-content: center;
  }
}

.cart-table-body {
  .shop-card {
    border-radius: 8px;
    border: 1px solid #F1F1F1;
    margin-bottom: 20px;
    padding: 0 11px;

    .shop-header {
      display: flex;
      align-items: center;
      padding: 12px 0;
      gap: 12px;
      border-bottom: 1px solid #F1F1F1;
      margin-bottom: 12px;


      .item {
        height: 20px;
        line-height: 20px;
        color: #969696;
        font-size: 12px;
      }

      .platform-tag {
        width: 20px;
        height: 20px;

        /deep/ img {
          width: 100%;
          height: 100%;
          margin: 0;
        }
      }
    }
  }
}

.shop-product-list {
  display: flex;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F1F1;

  .item {
    display: flex;
    align-items: center;
  }

  .text-center {
    justify-content: center;
  }

  &:last-child {
    border-bottom: none;
  }
}

.shop-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 0;
}

// 加载动画
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

// 响应式调整
@media (max-width: 768px) {
  .order-container {
    padding: 10px;
  }

  .filter-section {
    padding: 15px;

    .filter-tabs {
      .tab-item {
        padding: 8px 12px;
        font-size: 14px;
      }
    }

    .search-box {
      flex-direction: column;
      gap: 15px;

      .search-left {
        width: 100%;

        .search-input,
        select {
          min-width: 100%;
        }
      }
    }
  }

  .product-main {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .order-footer {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .pagination-inner {
    flex-direction: column;
    gap: 10px;
  }

  // 弹窗在移动端的调整
  .modal-overlay .modal-container,
  .chat-modal,
  .logistics-modal,
  .mend-modal,
  .address-modal {
    width: 95%;
    max-width: none;
  }

  .parcel-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .order-actions {
      width: 100%;
      justify-content: space-between;
    }
  }

  .product-info {
    flex-direction: column;
  }

  .mend-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .user-center-container {
    padding: 16px;

    .user-card {
      padding: 24px 16px;

      .assets-overview {
        grid-template-columns: 1fr;

        .balance-item {
          grid-column: span 1;
        }
      }
    }

    .auth-section {
      padding: 16px;

      .auth-item {
        flex-direction: column;
        text-align: center;

        .auth-icon {
          margin-right: 0;
          margin-bottom: 16px;
        }

        .auth-info {
          margin-bottom: 16px;
        }
      }
    }
  }
}
</style>